<template>
  <div class="about">
    <button @click="$doit()">全局方法调用</button>
    <h1>This is an about page</h1>
    <!-- 父传子用 props  :value="radio" 组件用props接收 -->
    <!-- 子传父用 事件    this.$emit('change', this.count)   -->
    <!-- 父组件用 事件监听   @change="radio = $event"-->
    <!-- $event就是事件的参数 子组件里面被发送 this.count -->
    <StepCom :value="radio" @change="radio = $event"></StepCom>
    <div
      :style="{
        border: '1px solid red',
        width: radio + 'px',
        height: radio + 'px'
      }"
    >
      {{ radio }}
    </div>
  </div>
</template>

<script>
import StepCom from '../components/SteperCom.vue'
export default {
  components: { StepCom },
  data() {
    return {
      radio: 10
    }
  }
}
</script>
